import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';

const SwingColComponent = (props) => {
  const { canDragIn, dragTo, status, children, statusSize = 1, title } = props;

  const handleDragEnter = (e) => {
    e.preventDefault();
  };
  const handleDragLeave = (e) => {
    e.preventDefault();
  };
  const handleDrop = (e) => {
    e.preventDefault();
    if (canDragIn) {
      dragTo(status);
    }
  };

  return (
    <div
      id={`col-${status.id}`}
      className={styles.col}
      style={{ width: `${100 / statusSize}%` }}
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragEnter}
      onDrop={handleDrop}
    >
      <header className={styles.colHeader}>{title}</header>
      <main className={styles.colMain}>{children}</main>
    </div>
  );
};
export default SwingColComponent;
